<template>
  <!--  <Menu mode="horizontal" ref="wzNav" theme="light" accordion width="auto" :active-name="wzNavName" :open-names="wzOpenNames" @on-select="openView">-->
  <Menu mode="horizontal" ref="wzNav" theme="light" accordion width="auto" :active-name="wzNavName" @on-select="openView">
    <template v-for="item,index in navList">
      <!--  子集就一条  只显示子集 不显示 父级   -->
      <template v-if="item.children.length == 1">
        <!--  hideInBread：true 不会显示上级菜单标题 -->
        <template v-if="item.menuHide">
          <!--循环子级 -->
          <menuData :navData="item"></menuData>
        </template>
        <!--  hideInBread：true 不会显示上级菜单标题 -->
        <template v-else>
          <Submenu :name="item.id">
            <template slot="title">
              <!--              <i :class="item.menuIcon"></i>-->
              <span>{{item.name}}</span>
            </template>
            <!--循环子级 -->
            <menuData :navData="item"></menuData>
          </Submenu>
        </template>
      </template>
      <!--  子集 > 1 循环渲染   -->
      <template v-else-if="item.children.length > 0">
        <Submenu :name="item.id">
          <template slot="title">
            <!--            <i :class="item.menuIcon"></i>-->
            <span>{{item.name}}</span>
          </template>
          <!--循环子级 -->
          <menuData :navData="item"></menuData>
        </Submenu>
      </template>
    </template>
  </Menu>
</template>
<script>

  import menuData from "./menuData";

  export default {
    components: {
      menuData,//列表
    },
    props: ['menuList'],
    data() {
      return {
        wzNavName: "",
        wzOpenNames: [],
        navList: [],
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态


      let that = this;
      that.navList = that.menuList.menus;

      //默认先传输过去第一个页面  tabs 使用 第一不可以关闭
      //let index = that.getMenuItem(that.navList, that.$route.name);
      let index = that.getMenuItem(that.navList, that.navList[0].children[0].menuUrl);
      index = {"label": index.name, "data": index.menuUrl}


      //默认选中的菜单 和 父级打开  end 传输现在展示菜单的数据

      that.wzNavName = that.$route.name;//菜单默认 选中
      that.wzOpenNames = that.menuExpansion(that.$route.name, that.navList);//父级默认展开
      //当前页面地址的菜单
      let mi = that.getMenuItem(that.navList, that.wzNavName);
      if (mi.data != index.data) {
        mi = {"label": mi.name, "data": mi.menuUrl}
      }
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法
      openView(name) {
        let that = this;
        let mi = that.getMenuItem(that.navList, name);
        mi = {"label": mi.name, "data": mi.menuUrl};
        //sessionStorage.setItem("menuData", JSON.stringify(that.menuList));
      },
      getMenuItem: function (dataList, name) {//获取菜单数据
        let that = this;
        for (let i = 0; i < dataList.length; i++) {
          if (!!dataList[i].children && dataList[i].children.length) {
            let data = that.getMenuItem(dataList[i].children, name)
            if (data) {
              return data;
            }
          } else {
            if (dataList[i].menuUrl == name) {
              return dataList[i];
            }
          }
        }
        return false;//这个应该不可能发生
      },
      menuExpansion: function (name, list, obj) {//菜单展开
        // 匹配名称 循环数组  本身对象  父级对象
        let that = this;
        let menusList = [];
        for (let i = 0; i < list.length; i++) {
          if (list[i].children.length > 0) {
            if (!!list[i].name) {
              menusList.push(list[i].id);
            }
            let data = that.menuExpansion(name, list[i].children, list[i]);
            if (data.length > 0) {
              menusList = menusList.concat(data);
              return menusList;
            } else {
              menusList = [];
            }
          } else {
            if (list[i].menuUrl == name) {
              menusList.push(obj.menuUrl);
              return menusList;
            }
          }
        }
        return menusList;
      },
    },
    watch: {//监听
      menuList(news, old) {
        this.navList = news.menu;
        let wzNavName = this.wzNavName;
        let wzOpenNames = this.wzOpenNames;
        this.wzNavName = '';
        this.wzNavName = wzNavName;
        this.wzOpenNames = '';
        this.wzOpenNames = wzOpenNames;
      },
      $route(to, from) {
        this.wzNavName = to.name;//菜单默认 选中
      }
    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">

  .ivu-menu-vertical span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 140px;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .ivu-menu-vertical i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .ivu-layout-sider-collapsed {
    width: 78px !important;
    flex: 0 0 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  .ivu-menu-horizontal.ivu-menu-light:after {
    height: 0px !important;
  }

</style>

